<template>
  <view class="app-infrom">
    <Navbar title="系统通知"></Navbar>
    <view class="list">
        <view class="item" v-for="(item,i) in list" :key="i">
            <view class="head">
              <view class="title">{{item.title}}</view>
              <view class="time">{{item.time}}</view>
            </view>
            <view class="text">{{item.content}}</view>
            <view class="more" v-if="item.jump!='N'">
                <span>查看详情</span>
                <span class="arrow"></span>
            </view>
        </view>
    </view>
  </view>
</template>
<script>
import {mapState} from "vuex";
export default {
  computed: {
    ...mapState({
      conversationActive:state => state.conversationActive,
    })
  },
  data() {
    return {
      list:[]
    }
  },
  onUnload(){
    //退出页面 将所有的会话内的消息设置为已读
    let promise = this.tim.setMessageRead({conversationID: this.conversationActive.conversationID});
    promise.then(function(imResponse) {
      console.log('全部已读')
      // 已读上报成功
    }).catch(function(imError) {
      // 已读上报失败
      console.warn('setMessageRead error:', imError);
    });
  },
  onLoad(){
    this.getMsgList()
  },
  methods: {
    getMsgList(){
				// 历史消息列表
          console.log(this.conversationActive)
					let conversationID = this.conversationActive.conversationID
					let promise = this.tim.getMessageList({conversationID: conversationID});
					promise.then((res)=> {
						console.log("🚀 ~ promise.then ~ res:", res)
						const data=res.data.messageList
            let list=[]
            data.forEach(x=>{
              try{
                  list.push(JSON.parse(x.payload.text)) 
              }catch(err){ }
            })
            this.list=list
            console.log(list)
						// this.$store.commit('pushCurrentMessageList',  res.data.messageList)
					  // this.nextReqMessageID =  res.data.nextReqMessageID // 用于续拉，分页续拉时需传入该字段。
					  // this.isCompleted =  res.data.isCompleted
					  // this.scrollToView = res.data.messageList[res.data.messageList.length-1].ID
						// console.log(this.nextReqMessageID)
					});
				// 滚动到底部
				this.$nextTick(function() {
					//进入页面滚动到底部
					this.scrollTop = 9999;
					this.$nextTick(function() {
						this.scrollAnimation = true;
					});
				});
			},
  },
}
</script>
<style lang="scss">
  .list{
    padding: 0 30rpx 60rpx 30rpx;
    .item{
      padding: 0 40rpx;
      background: #FFFFFF;
      border-radius: 30rpx 30rpx 30rpx 30rpx;
      border: 2rpx solid #101011;
      margin-top: 60rpx;
      .head{
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 30rpx 0 20rpx 0;
        .title{
          font-weight: 500;
          font-size: 32rpx;
          color: #101011;
        }
        .time{
          color: #909399;
        }
      }
      .text{
        font-size: 26rpx;
        color: #909399;
        padding-bottom: 30rpx;
      }
      .more{
        font-size: 28rpx;
        color: #606266;
        padding: 26rpx;
        border-top:2rpx solid #F5F6F7;;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .arrow{
          transform: rotate(45deg);
          width: 18rpx;
          height: 18rpx;
          border-top: 4rpx solid #1A0C21;
          border-right: 4rpx solid #1A0C21;
        }
      }
    }
  }
</style>